<template>
  <div>
    <treeselect
      :normalizer="normalizer"
      :options="modelsTree"
      placeholder=""
      :defaultExpandLevel="Infinity"
      @select="selectNode"
      @input="input"
      :value="model"
    />
  </div>
</template>

<script>
import treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  inject: ["getStore"],
  props: ["model","defaultValue"],
  components: {
    treeselect,
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.prefix,
          label: node.prefix,
        };
      },
    };
  },
  computed: {
    store() {
      return this.getStore();
    },
    modelsTree() {
      return this.store.modelTree;
    },
  },
  methods: {
    selectNode(node){
      console.log("🚀 ~ file: index.vue ~ line 43 ~ update ~ node", node)
     this.$emit("update:model", node.prefix); 
     this.store.initComponentTree()
    },
    input(value){
      if (!value) {
       this.$emit("update:model", '');
       this.store.initComponentTree()
      }
    }
  },
};
</script>

<style>
</style>